import React from 'react'

type Props = {}

function Classfiy({ }: Props) {
    return (
        <div style={{ background: 'rgb(244 241 241)', width: '100%', height: '100%' }}>
            <div className="order-details" style={{
                width: '100%',
                height: '250px',
                margin: '0 auto',
                background: 'rgb(27, 169, 186)',
                borderRadius: '0 0 15px 15px'

            }}>
                <div className="order-detailsHeader" style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    textAlign: 'center',
                    padding: '5px 6px',
                }}>
                    <div className="order-detailsLeft" style={{ color: '#ffffff' }}>&</div>
                    <div className="order-detailsRight" style={{ color: '#ffffff' }}>订单详情</div>
                    <div></div>
                </div>
                <div className="order-detailsCenten" style={{
                    display: 'flex', justifyContent: 'space-between', padding: '5px 20px', marginTop: '30px'
                }}>
                    <img src="" alt="暂未图片" className='order-detailsImages' style={{ border: '1px solid #ffffff', width: '70', height: '70', fontSize: '10px' }} />
                    <div className="order-detailsCentenLeft" style={{ marginLeft: '10px' }}>
                        <div className='ticket-issuedSuccessfully' style={{ fontSize: "24px", color: '#ffffff' }}>出票成功</div>
                        <div style={{ marginTop: '5px', fontSize: "12px", color: '#ffffff' }}>请您持购证件在车站或代售点取票后按时乘车</div>
                    </div>
                </div>
            </div>
            <div className="order-forGoods" style={{ width: '97%', height: '37%', zIndex: '999', position: 'relative', top: '-110px', margin: '0 auto', borderRadius: '10px', background: '#ffffff', }}>
                <div className="order-forGoodsPadding" style={{ width: '94%', height: '98%', margin: '0 auto' }}>
                    <div className="order-forGoodsName" style={{ padding: '15px 0px', color: 'rgb(41 39 39)' }}>
                        取票号：BW123455
                    </div>
                    <div className="order-forGoodsDate" style={{ display: 'flex', justifyContent: 'space-between', color: '#ccc' }}>
                        <div>06月15日周二</div>
                        <div>06月15日周二</div>
                    </div>
                    <div className="order-forGoodsTime" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', color: 'black', fontSize: '25px', fontWeight: '600' }}>
                        <div>06：24</div>
                        <div>经停信息</div>
                        <div>07：21</div>
                    </div>
                    <div className="order-forGoodslocation" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', color: 'rgb(41 39 39)' }}>
                        <div>合肥南</div>
                        <div>G7740</div>
                        <div>南京南</div>
                    </div>
                    <div className="order-forGoodsInformation">
                        <div className="order-forGoodsTitle" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', color: 'black', fontSize: '18px', fontWeight: '800' }}>
                            <div>王一默<span style={{ color: '#ccc', border: '1px solid #ccc', padding: '3px 3px', fontSize: '12px', marginLeft: '5px' }}>成人票</span></div>
                            <div>一等座￥107</div>
                        </div>
                        <div className="order-forGoodsCenter" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', color: '#ccc' }}>
                            <div>身份证 110102**********28</div>
                            <div><span style={{ color: 'green', border: '1px solid green', padding: '3px 3px', fontSize: '12px', marginRight: '5px' }}>靠窗</span>03车厢16A号</div>
                        </div>
                        <div style={{ marginTop: '10px', color: 'green' }}>出票成功</div>
                    </div>
                </div>
            </div>
            <div className="order-No." style={{ width: '97%', height: '15%', background: '#ffffff', margin: '0 auto', borderRadius: '10px', marginTop: '-95px' }}>
                <div className="order-No.Ti" style={{ display: 'flex', justifyContent: 'space-between', padding: '20px 11px', color: 'rgb(41 39 39)' }}>
                    <div>订单号</div>
                    <div>E369941878</div>
                </div>
                <div className="order-No.Phone" style={{ display: 'flex', justifyContent: 'space-between', padding: '0 11px', color: 'rgb(41 39 39)' }}>
                    <div>通知手机</div>
                    <div>188123456789</div>
                </div>
            </div>
            <div className="ADULT" style={{ width: '97%', height: '15%', background: '#ffffff', margin: '0 auto', borderRadius: '10px', marginTop: '15px' }}>
                <div className="ADULT-vote" style={{ display: 'flex', justifyContent: 'space-between', padding: '20px 11px', color: 'rgb(41 39 39)' }}>
                    <div>成人票</div>
                    <div>￥107x1</div>
                </div>
                <div className="order-amount" style={{ display: 'flex', justifyContent: 'space-between', padding: '0 11px', color: 'rgb(41 39 39)' }}>
                    <div>订单总计</div>
                    <div style={{ color: 'orange', fontSize: '23px' }}>￥107</div>
                </div>
            </div>
        </div >
    )
}

export default Classfiy